<!DOCTYPE html>
<html>
<head>
    <title>Personal Knowledge Base</title>
    <style>
        .container { max-width: 800px; margin: 0 auto; padding: 20px; }
        .upload-section { margin-bottom: 30px; }
        .chat-box { border: 1px solid #ccc; padding: 20px; border-radius: 5px; }
        .message { margin: 10px 0; padding: 10px; border-radius: 5px; }
        .user-message { background-color: #e3f2fd; }
        .bot-message { background-color: #f5f5f5; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Personal Knowledge Base</h1>

        <div class="upload-section">
            <h2>Upload Documents</h2>
            <input type="file" id="fileInput">
            <button onclick="uploadFile()">Upload</button>
            <div id="fileList">
                <h3>Uploaded Files:</h3>
                <ul id="fileListItems">
                    {% for file in files %}
                        <li>{{ file }}</li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div class="chat-box">
            <h2>Ask Question</h2>
            <div id="chatHistory"></div>
            <input type="text" id="questionInput" placeholder="Type your question..." style="width: 80%">
            <button onclick="askQuestion()">Ask</button>
        </div>
    </div>

    <script>
        async function uploadFile() {
            const fileInput = document.getElementById('fileInput');
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);

            const response = await fetch('/upload/', {
                method: 'POST',
                body: formData
            });

            if (response.ok) {
                const data = await response.json();
                const fileList = document.getElementById('fileListItems');
                fileList.innerHTML += `<li>${data.filename}</li>`;
            }
        }

        async function askQuestion() {
            const input = document.getElementById('questionInput');
            const chatHistory = document.getElementById('chatHistory');

            // 添加用户消息
            chatHistory.innerHTML += `
                <div class="message user-message">
                    <strong>You:</strong> ${input.value}
                </div>
            `;

            const response = await fetch('/ask/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `question=${encodeURIComponent(input.value)}`
            });

            if (response.ok) {
                const data = await response.json();
                // 添加机器人回复
                chatHistory.innerHTML += `
                    <div class="message bot-message">
                        <strong>Assistant:</strong> ${data.answer}
                    </div>
                `;
            }

            input.value = '';
        }
    </script>
</body>
</html>